<template>
  <div
    :class="className"
    :id="className"
    :style="{ height: height, width: width }"
  />
</template>

<script>
import * as echarts from "echarts";

require("echarts/theme/macarons"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chartmain",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    legendShow: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
    str: {
      type: String,
      default: "%",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    str(val) {
      return val;
    },
    chartData: {
      deep: true,
      handler(val) {
        if (this.chart) {
          this.chart.clear();
          this.setOptions(val);
        }
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initChart();
      }, 80);
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      var chartDom3 = document.getElementById(this.className);
      this.chart = echarts.init(chartDom3);

      this.chart.clear();
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, date, name, lenged } = {}) {
      let that = this;
      this.chart.setOption({
        xAxis: {
          data: date,
          boundaryGap: false,
          axisTick: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#7C8CA5",
            },
          },
        },
        grid: {
          left: lenged == "left" ? "18%" : 20,
          right: 40,
          bottom: this.legendShow ? 50 : 10,
          top: 30,
          containLabel: true,
          width: lenged == "left" ? "79%" : "89%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: function(params) {
            let str = "";
            let time = "";
            params.forEach((element) => {
              time = element.name + "<br/>";
              str +=
                "<span>" +
                element.seriesName +
                "</span><span style='float:right;margin-left:10px;font-weight: bold;' > " +
                element.value +
                that.str +
                "</span><br/>";
            });

            return time + str;
          },
          // formatter: '{a} {c}'+this.str,
          // formatter : '{a0}:{c0}'+this.str+'<br />{a1}:{c1}'+this.str+'<br />{a2}:{c2}'+this.str,
          padding: [5, 10],
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          // minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
          axisLine: {
            show: false,
            textStyle: {
              color: "#7C8CA5",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#7C8CA5",
            },
          },
        },
        legend: {
          show: this.legendShow,
          data: name,
          x: lenged == "left" ? "left" : "center", // 'center' | 'left' | {number},
          y: lenged == "left" ? "center" : "bottom", // 'center' | 'bottom' | {number}
          orient: lenged == "left" ? "vertical" : "horizontal", //vertical垂直显示 //horizontal 横排
          padding: [10, 10, 10, 10],
          lineHeight: 50,
          textStyle: {
            color: "#7c8ca5",
          },
          // textStyle:{
          //   lineHeight:50
          // },
        },
        series: [
          {
            name: name && name.length > 0 && name[0],
            itemStyle: {
              normal: {
                color: "#289DF5",
                lineStyle: {
                  color: "#289DF5",
                  width: 2,
                },
              },
            },
            areaStyle: {
              //折现下方阴影
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#d2e7f2", // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "#d2e7f2", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            type: "line",
            data: expectedData[0],
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
          {
            name: name[1],
            type: "line",
            itemStyle: {
              normal: {
                color: "#FBC225",
                lineStyle: {
                  color: "#FBC225",
                  width: 2,
                },
                areaStyle: {
                  color: "#f3f8ff",
                },
              },
            },
            data: expectedData[1],
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
          {
            name: name[2],
            type: "line",
            itemStyle: {
              normal: {
                color: "#66B92E",
                lineStyle: {
                  color: "#66B92E",
                  width: 2,
                },
                areaStyle: {
                  color: "#f3f8ff",
                },
              },
            },
            data: expectedData[2],
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
          {
            name: name[3],
            type: "line",
            itemStyle: {
              normal: {
                color: "#D65B4A",
                lineStyle: {
                  color: "#D65B4A",
                  width: 2,
                },
                areaStyle: {
                  color: "#f3f8ff",
                },
              },
            },
            data: expectedData[3],
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
          {
            name: name[4],
            type: "line",
            itemStyle: {
              normal: {
                color: "#896DE5",
                lineStyle: {
                  color: "#896DE5",
                  width: 2,
                },
                areaStyle: {
                  color: "#f3f8ff",
                },
              },
            },
            data: expectedData[4],
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
        ],
      });
    },
  },
};
</script>
